<template>
	<view>
		<!-- <view class="common-wrap tp-w690">
			<view class="input-wrap">
				<view class="type">投诉原因</view>
				<picker :range="reasonList" @change="handleChooseComplaintReason">
					<view class="input">
						<input type="text" disabled v-model="update.complaintReason" placeholder="请选择"/>
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
		</view> -->

		<view class="common-wrap tp-w690">
			<view class="input-wrap remark">
				<view class="tit">反馈内容：</view>
				<textarea class="textarea" v-model="update.content" placeholder="请输入反馈内容,必填" />
				</view>
		</view>
		
			<view class="tp-w690 tp-pd30 tp-bgf tp-bbox tp-mt30 tp-br12 tp-fz30 tp-fc333">
				<view class="tit">上传凭证</view>
				<view class="flex tp-mt20 tp-mb20">
					<view class="" style="position: relative;" v-for="(item,index) in list" :key="index" >
						<image @click="previewImg(item)" class="zheng-img tp-br12" :src="item" :style="{marginRight:(index+1)%3 == 0 ?'0':'32rpx'}" mode="aspectFill"></image>
						<image @click.stop="delThisImg(index)" class="close-icon" src="../static/imgs/icons/close4.png" mode=""></image>
					</view>
					<image v-if="list.length < 3" @click="handleUploadIDImgPositive" class="zheng-img tp-br12" src="static/upimg.png" mode=""></image>
					
				</view>
				<text class="tp-fc999 tp-fz24">最多上传3张图片</text>
			</view>
			
			
			<view class="title_box level_align tp-h88 tp-fxc tp-br8 tp-w690 tp-mt20">
				<view class="title_line">
					联系方式
				</view>
			</view>
			
			<view class="common-wrap tp-w690">
				<view class="input-wrap">
					<view class="type">姓名</view>
						<view class="input">
							<input type="text"  v-model="update.feedbackName" placeholder="请输入"/>
							<!-- <uni-icons type="arrowright" size="20" color="#999"></uni-icons> -->
						</view>
				</view>
			</view>
			
			<view class="common-wrap tp-w690">
				<view class="input-wrap">
					<view class="type">手机号</view>
						<view class="input">
							<input type="number" maxlength="11" v-model="update.phone" placeholder="请输入手机号"/>
							<!-- <uni-icons type="arrowright" size="20" color="#999"></uni-icons> -->
						</view>
				</view>
			</view>
		
		<view class="common-btn" @click="handleSave">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reasonList: ['个人', '商家'],
				list: [], // 展示的图片
				uplist: [], // 上传的图片
				update: {
					// complaintReason: '',
					content: '', // 	投诉内容
					imgExt: '', // 图片字段拼接字符串
					feedbackName: '', // 	反馈人姓名
					phone: '', // 手机号
				}
			};
		},
		methods: {
			handleChooseComplaintReason(e) {
				const i = e.detail.value
				this.$set(this.update, 'complaintReason', this.reasonList[i])
			},
			// 意见反馈
			handleSave() {
				let {content,feedbackName,phone,imgExt} = this.update
				let regexPhone = this.$regexPhone
				// if(!complaintReason.trim()) return uni.showToast({title: '请选择投诉原因',icon: 'none'});
				if(!content.trim()) return uni.showToast({title: '请输入投诉内容',icon: 'none'});
				if(!imgExt) return uni.showToast({title: '请上传凭证',icon: 'none'});
				if(!feedbackName.trim()) return uni.showToast({title: '请输入姓名',icon: 'none'});
				if(!regexPhone.test(phone.trim())) return uni.showToast({title: '请正确输入手机号',icon: 'none'});
				
				this.$http.post(this.$api.feedback, {content,imgExt,feedbackName,phone}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({delta: 1});
						},600)
					}
				})
			},
			// 上传图片
			handleUploadIDImgPositive() {
				const _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '],
					success: ({tempFilePaths}) => {
						uni.uploadFile({
							url: _this.$baseUrl + _this.$api.uploadFile,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let uploadData = JSON.parse(uploadFileRes.data)
								let str = this.$imgUrl + uploadData.url
								_this.list.push(str)
								_this.uplist.push(uploadData.url)
								 _this.update.imgExt = _this.uplist.join(',')
								// _this.$set(this.updata, key, uploadData.url)
							}
						})
					}
				});
			},
			// 删除这个图片
			delThisImg(index){
				this.list.splice(index,1)
				this.uplist.splice(index,1)
				this.update.imgExt = this.uplist.join(',')
			},
			// 预览图片
			previewImg(url) {
				console.log(url);
				uni.previewImage({
					current: url,
					urls: this.list,
					success: function(){
						console.log('预览')
					},
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.common-wrap {
	border-radius: 12rpx;
	background-color: #fff;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 20rpx;
	.input-wrap {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebebeb;
		font-size: 30rpx;
		&:last-child {
			border: none;
		}
		&.remark {
			height: 320rpx;
			align-items: flex-start;
			padding: 30rpx 0;
			box-sizing: border-box;
			.textarea {
				flex: 1;
				height: 280rpx;
			}
		}
		.l-wrap {
			display: flex;
			align-items: center;
			.icon {
				display: inline-block;
				height: 30rpx;
				width: 30rpx;
				margin-right: 20rpx;
			}
			.terms {
				color: $blue;
			}
		}
		.pirce {
			color: $red;
			padding-right: 10rpx;
		}
		.ul_service {
			display: flex;
			.li_service {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				margin-left: 80rpx;
				.txt {
					margin-left: 20rpx;
				}
			}
		}
		.type {
			font-size: 30rpx;
		}
		.input {
			flex: 1;
			text-align: right;
			font-size: 30rpx;
			display: flex;
			input {
				padding-right: 6rpx;
			}
		}
	}
}

.common-btn {
	width: 520rpx;
	box-shadow: none;
	margin-top: 60rpx;
}
.zheng-img{
	width: 188rpx;
	height: 188rpx;
}
.title_box {
		padding: 0 22rpx;
		font-size: 30rpx;
		border-radius: 15rpx;
		font-weight: 500;
		.title_line {
			padding-left: 30rpx;
			position: relative;
			font-size: 30rpx;

			&::before {
				position: absolute;
				top: 50%;
				left: 0rpx;
				transform: translateY(-50%);
				content: "";
				width: 6rpx;
				height: 80%;
				border-radius: 3rpx;
				background: #00B4FF;
			}
		}
		
	}
	.close-icon{
		position: absolute;
		top: -14rpx;
		right: 14rpx;
		width: 28rpx;
		height: 28rpx;
	}
</style>
